<!DOCTYPE html>
<html Jarvan>
<head>
	<title>莫凡文化传媒</title>
	<meta charset="utf-8">
	<style type="text/css">
		body{
			margin: 0;
		}
		a{
			color: black;
			text-decoration: none;
		}
		.aa{
			width: 3em;
		}
		#body{
			margin: 0 auto;
			width: 1200px;
			overflow: hidden;
		}
		#top{
			height: 64px;
			position: relative;
		}
		#top>img{
			position: absolute;
			left: 120px;
			top: 15px;
		}
		#top>span{
			position: absolute;
			top: 22px;
			left: 201px;
			font-size: 20px;
		}
		.aa:hover{
			color: red;
			border-bottom: 2px solid red;
		}
		#a1{
			text-align: center;
		}
		#a1 a{
			display: inline-block;
			padding-bottom: 18px;
			margin: 25px 0px 0 20px;
		}
		#aa3{
			border-bottom: 2px solid red;
		}
		#aa3{
			color: red;
		}
		#a2{
			margin: -46px 100px 0 0;
			font-size: 0;
		}
		#a2 img{
			cursor: pointer;
			margin: 0 12px 0 0;
			float: right;
		}
		#toppic{
			position: relative;
			display: inline-block;
		}
		#toppic>img:nth-child(2){
			position: absolute;
			top: 207px;
			left: 390px;
		}
		#tpic{
			width: 2400px;
			position: relative;
			font-size: 0;
		}
		#main{
			margin: 0 auto;
			position: relative;
		}
		#c1{
			position: relative;
			top: 30px;
			left: 565px;
			width: 4em;
			padding-bottom: 14px;
			border-bottom: 4px solid red;
		}
		#c2{
			position: relative;
			width: 958px;
			margin: 70px auto 0;
		}
		#c2>div{
			display: inline-block;
			width: 267px;
			text-align: right;
		}
		#c2 img{
			cursor: pointer;
			margin: 0 16px 0 0;
		}
		#c2 span{
			display: inline-block;
			position: relative;
			left: -105px;
			top: 24px;
		}
		#c3{
			margin: 72px auto 0;
			border-top: 2px solid red;
			width: 956px;
			height: 510px;
			text-align: center;
		}
		#c4 div{
			display: inline-block;
			margin: 26px 60px 0 0;
			padding-bottom: 14px;
			cursor: pointer;
		}
		#c4>div:nth-child(1){
			border-bottom: 4px solid red;
		}
		#c4 div:hover{
			border-bottom: 4px solid red;
		}
		#c5 p{
			margin: 14px 0;
		}
		#c5{
			position: relative;
			margin-top: 22px;
		}
		.cc{
			position: relative;
			display: inline-block;
			text-align: center;
		}
		#zuopin{
			text-align: center;
		}
		#guanyu{
			margin-top: 54px;
		}
		#d1{
			color: white;
			position: relative;
		}
		#d1>img:nth-child(2){
			position: absolute;
			top: 110px;
			left: 178px;
		}
		#d2{
			position: absolute;
			top: 30px;
			left: 566px;
			border-bottom: 4px solid white;
			padding-bottom: 14px;
		}
		#d3{
			position: absolute;
			top: 110px;
			right: 170px;
			width: 475px;
			height: 252px;
			font-size: 14px;
			line-height: 20px;
		}
		#e1{
			position: relative;
			top: 30px;
			left: 565px;
			width: 4em;
			padding-bottom: 14px;
			margin-bottom: 60px;
			border-bottom: 4px solid red;
		}
		#hezuo{
			text-align: center;
		}
		#hezuo img{
			margin: 16px 12px 0 0;
		}
		#e2{
			position: relative;
			top: 28px;
			left: 565px;
			width: 4em;
			padding-bottom: 14px;
			margin-bottom: 60px;
			border-bottom: 4px solid red;
		}
		#bottom{
			position: relative;
			height: 812px;
			background-color: white;
		}
		#e5{
			position: absolute;
			top: 460px;
			font-size: 14px;
			left: 640px;
			line-height: 22px;
		}
		#e6{
			height: 80px;
			background-color: rgb(31,32,46);
			position: relative;
			top: 33px;
			color: rgb(202,202,202);
			font-size: 14px;
			text-align: center;
			line-height: 80px;
		}
		.aaa{
			background-color: white;
			cursor: pointer;
			z-index: -2;
			border-radius: 50%;
			border: 1px solid black;
			height: 36px;
			position: absolute;
			top: 14px;
			width: 36px;
		}
		#aaa2:hover~.a33{
			border: 1px solid red;
		}
		#aaa3:hover~.a22{
			border: 1px solid red;
		}
		#aaa1:hover~.a44{
			border: 1px solid red;
		}
		#aaa4:hover~.a11{
			border: 1px solid red;
		}
		#aaa1:hover{
			opacity: 0.6;
		}
		#aaa2:hover{
			opacity: 0.6;
		}
		#aaa3:hover{
			opacity: 0.6;
		}
		#aaa4:hover{
			opacity: 0.6;
		}
		#aaa4:hovrt{
			opacity: 0.6;
			z-index: 22;
		}
		.a11{
			right: 255px;
		}
		.a22{
			right: 206px;
		}
		.a33{
			right: 159px;
		}
		.a44{
			right: 110px;
		}
		.c11{
			cursor: pointer;
			width: 267px;
			height: 182px;
			position: absolute;
			top: 0;
		}
		.c11:hover{
			background-color: rgba(0,0,0,0.4);
		}
		.c11:hover>.c22{
			display: block;
		}
		.c22{
			display: none;
			position: absolute;
			top: 60px;
			left: 105px;
			width: 50px;
			height: 50px;
			border: 2px solid white;
			border-radius: 50%;
			color: white;
			text-align: center;
			line-height: 50px;
			font-size: 22px;
			opacity: 0.8;
		}
		.d11{
			display: inline-block;
			cursor: pointer;
			width: 253px;
			height: 173px;
			position: absolute;
			top: 0;
			left: 0;
		}
		.d22{
			display: none;
			position: absolute;
			top: 60px;
			left: 105px;
			width: 50px;
			height: 50px;
			border: 2px solid white;
			border-radius: 50%;
			color: white;
			text-align: center;
			line-height: 50px;
			font-size: 22px;
			opacity: 0.8;
		}
		.d11:hover{
			background-color: rgba(0,0,0,0.4);
		}
		.d11:hover>.d22{
			display: block;
		}
		ul{
			font-size: 14px;
			position: relative;
			margin: 0 auto;
			list-style-position: inside;
			width: 890px;
			line-height: 45px;
		}
		ul li{
			padding: 0 22px;
			vertical-align: top;
			border-bottom: 1px solid rgb(202,202,202);
		}
		ul p{
			margin: 0 0 0 38px;
			vertical-align: top;
			width: 700px;
			display: inline-block;
		}
		.num{
			margin: 20px 4px 0 0;
			display: inline-block;
			width: 38px;
			text-align: center;
			line-height: 38px;
			height: 38px;
			color: rgb(182,182,182);
			cursor: pointer;
			border: 2px solid rgb(202,202,202);
		}
		.play{
			cursor: pointer;
			margin: 20px 0 0 0;
			display: inline-block;
			width: 60px;
			text-align: center;
			height: 38px;
			border: 2px solid rgb(202,202,202);
		}
		.play>img{
			margin-top: 7px;
		}
		#nb1{
			position: absolute;
			right: 294px;
			color: red;
			border: 2px solid red;
		}
		#nb2{
			position: absolute;
			right: 248px;
		}
		#nb2:hover{
			color: red;
			border: 2px solid red;
		}
		#nb3{
			position: absolute;
			right: 202px;
		}
		#nb3:hover{
			color: red;
			border: 2px solid red;
		}
		#shang{
			position: absolute;
			right: 345px;
		}
		#shang:hover{
			color: red;
			border: 2px solid red;
		}
		#shang:active{
			color: red;
			border: 2px solid red;
		}
		#xia{
			position: absolute;
			right: 138px;
		}
		#xia:hover{
			color: red;
			border: 2px solid red;
		}
		#xia:active{
			color: red;
			border: 2px solid red;
		}
		#biao1{
			font-size: 16px;
			width: 1200px;
			display: inline-block;
		}
		#biao2{
			font-size: 256px;
			width: 1200px;
			height: 505px;
			background-color: pink;
			display: inline-block;
			vertical-align: top;
		}
		#biao3{
			font-size: 256px;
			display: inline-block;
			width: 1200px;
			height: 505px;
			background-color: cyan;
			vertical-align: top;
		}
		#bian{
			width: 3800px;
			font-size: 0;
		}
	</style>
</head>
<body>
	<div id="body">
		<div id="top">
			<img src="imgs/mf/shouye/logo.png">
			<span>莫凡文化传媒</span>
			<div id="a1">
				<a id="aa1" class="aa" href="04-莫凡文化传媒.html">HOME</a><a class="aa" id="aa2" href="04-zuopin.html">WORKS</a><a class="aa" id="aa3" href="#">新闻</a><a class="aa" id="aa4" href="04-guanyu.html">ABOUT</a><a class="aa" id="aa5" href="04-lianxi.html" style="width: 4em">CONTACT</a>
			</div>
			<div id="a2">
				<img id="aaa1" src="imgs/mf/shouye/phone.png">
				<img id="aaa2" src="imgs/mf/shouye/qq.png">
				<img id="aaa3" src="imgs/mf/shouye/weixin.png">
				<img id="aaa4" src="imgs/mf/shouye/sian2.png">
				<div class="aaa a11"></div>
				<div class="aaa a22"></div>
				<div class="aaa a33"></div>
				<div class="aaa a44"></div>
			</div>
		</div>
		<div id="main">
			<div id="diyi" style="position: relative;">
				<div id="tpic">
					<div id="toppic">
						<img src="imgs/mf/shouye/pic2.png">
					</div>
				</div>
			</div>
		<div id="bottom">
			<div id="e2">莫凡新闻</div>
			<div id="bian">
				<div id="biao1">
					<ul>
						<li>2015-5-13<p>“营销前沿，荣誉巅峰”——2016年度百度认证营销专家（高级）公开答辩会成功举办。</p></li>
						<li>2015-5-13<p>百度认证组织高级论文评审委员会对论文进行初审，高级论文评审委员会的专家来自百度公司，高校.
				         地点：中关村软件园国际会议中心三层宴会厅</p></li>
						<li>2015-5-13<p>翼蓝影视标志释义</p></li>
						<li>2015-5-13<p>翼蓝影视标志释义</p></li>
						<li>2015-5-13<p>百度认证组织高级论文评审委员会对论文进行初审，高级论文评审委员会的专家来自百度公司，高校.
				         地点：中关村软件园国际会议中心三层宴会厅</p></li>
						<li>2015-5-13<p>翼蓝影视标志释义</p></li>
						<li>2015-5-13<p>翼蓝影视标志释义</p></li>
						<li>2015-5-13<p>百度认证组织高级论文评审委员会对论文进行初审，高级论文评审委员会的专家来自百度公司，高校.
				         地点：中关村软件园国际会议中心三层宴会厅</p></li>
					</ul>
				</div>
				<div id="biao2">
					2
				</div>
				<div id="biao3">
					3
				</div>
			</div>
			<div class="play" id="shang" onclick="hua2()"><img src="imgs/mf/shouye/pageup.png"></div>
			<div class="play" id="xia" onclick="hua()"><img src="imgs/mf/shouye/pagedown.png"></div>
			<div class="num" id="nb1" onclick="nbClick(0)">1</div>
			<div class="num" id="nb2" onclick="nbClick(1)">2</div>
			<div class="num" id="nb3" onclick="nbClick(2)">3</div><br><br><br><br><br><br>
			<div id="e6">
				<p>
					Copyright 2016-2030All Rights Reserved GUANG DONG SI DUAN LAW OFFICE
				</p>
			</div>
		</div>
	</div>
</body>
</html>
<script type="text/javascript">
	var changeDiv = document.getElementById('bian');
	var biaoDiv1 = document.getElementById('biao1');
	var biaoDiv2 = document.getElementById('biao2');
	var biaoDiv3 = document.getElementById('biao3');
	var num1 = document.getElementById('nb1');
	var num2 = document.getElementById('nb2');
	var num3 = document.getElementById('nb3');
	var nbDivs = [num1,num2,num3];

	var newsIndex = 0;
	function hua(){
		newsIndex++;
		callChange(newsIndex);
	}
	
	function hua2(){
		newsIndex--;
		callChange(newsIndex);
	}

	function callChange(a){
		if (newsIndex < 0) {
			newsIndex = 2;
		}else if (newsIndex > 2) {
			newsIndex = 0;
		}
		change(newsIndex);
	}

	function nbClick(num){
		newsIndex = num;
		callChange(newsIndex);
	}

	function change(index){
		for (var i = 0; i < nbDivs.length; i++) {
			nbDivs[i].style.color = "rgb(202,202,202)";
			nbDivs[i].style.border = "2px solid rgb(202,202,202)";
		}
		nbDivs[index].style.color = "red";
		nbDivs[index].style.border = "2px solid red";
		changeDiv.style.transform = "translate(" + (-1200*index) + "px,0)";
	}



	var daoDiv1 = document.getElementById('aa1');
	var daoDiv2 = document.getElementById('aa2');
	var daoDiv3 = document.getElementById('aa3');
	var daoDiv4 = document.getElementById('aa4');
	var daoDiv5 = document.getElementById('aa5');

	daoDiv1.onmouseenter = function(){
		daoDiv1.innerHTML = '首页';
		daoDiv1.style.borderBottom = "2px solid red;"
	}
	daoDiv1.onmouseleave = function(){
		daoDiv1.innerHTML = 'HOME';
		daoDiv1.style.borderBottom = "2px solid rgba(0,0,0,0);"
	}
	daoDiv2.onmouseenter = function(){
		daoDiv2.innerHTML = '作品';
		daoDiv2.style.borderBottom = "2px solid red";
		daoDiv2.style.color = "red";
	}
	daoDiv2.onmouseleave = function(){
		daoDiv2.innerHTML = 'WORKS';
		daoDiv2.style.borderBottom = "2px solid rgba(0,0,0,0)";
		daoDiv2.style.color = "black";
	}
	daoDiv3.onmouseenter = function(){
		daoDiv3.innerHTML = '新闻';
		daoDiv3.style.borderBottom = "2px solid red";
		daoDiv3.style.color = "red";
	}
	daoDiv4.onmouseenter = function(){
		daoDiv4.innerHTML = '关于';
		daoDiv4.style.borderBottom = "2px solid red";
		daoDiv4.style.color = "red";
	}
	daoDiv4.onmouseleave = function(){
		daoDiv4.innerHTML = 'ABOUT';
		daoDiv4.style.borderBottom = "2px solid rgba(0,0,0,0)";
		daoDiv4.style.color = "black";
	}
	daoDiv5.onmouseenter = function(){
		daoDiv5.innerHTML = '联系';
		daoDiv5.style.borderBottom = "2px solid red";
		daoDiv5.style.color = "red";
	}
	daoDiv5.onmouseleave = function(){
		daoDiv5.innerHTML = 'CONTACT';
		daoDiv5.style.borderBottom = "2px solid rgba(0,0,0,0)";
		daoDiv5.style.color = "black";
	}
</script>